<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
    <title>移除监听器</title>
</head>
<body>

    <h3>请按下键盘触发键盘事件</h3>

    <button type="button">移除window上的键盘事件监听器</button>

    <script type="text/javascript">
        const type = 'keypress' ;
        const listener1 = {
            handleEvent(e){
                console.log( e );
            }
        }
        const capture = false ;
        window.addEventListener( type , listener1 , capture );

        const listener2 = {
            handleEvent(e){
                alert( `你按下的是：${e.key}` );
            }
        }
        window.addEventListener( type , listener2 , capture );

        const btn = document.querySelector( 'button' );
        btn.addEventListener( 'click' , {
            handleEvent(){
                // 移除在 window 上绑定的 `type` 事件 监听器 `listener2`
                window.removeEventListener( type , listener2 , capture );
            }
        } , false );
    </script>

    <ul>
        <li>
            <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent">键盘事件</a>
        </li>
        <li>
            <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent">鼠标事件</a>
        </li>
    </ul>

    <p>
        问题: 怎么获取用户按下的组合键，比如 ctrl + c ？
    </p>

    <p>
        问题: 怎么获取某个事件目标上同一个事件的多个监听器
    </p>
    
</body>
</html>